<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>订单页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js" type="text/javascript"></script>
		<script src="js/vue.min.js" type="text/javascript"></script>
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<style type="text/css">
			.date{position: absolute;left: 44%;bottom: 4px;color: orangered;font-weight: bold;}
			.price{position: absolute;left: 44%;bottom: 40px;color: orangered;font-weight: bold;}
			i.jiange{font-style: normal;visibility: hidden;}
			.person dl{margin: 0px;padding: 10px;}
			.person dl dt{padding: 10px;padding-left: 0px;padding-right: 0px;border-bottom: dashed 1px #ccc;position: relative;}
			.person dl dt a{color: #35d0c9;border-radius: 3px;display: inline-block;padding: 4px;border: solid 1px #35D0C9;
			position: absolute;right: 0px;bottom: 10px;}
			.person dl dd{padding: 10px;padding-left: 0px;padding-right: 0px;margin-left: 0px;}
			.mui-input-group:before{background-color: transparent;}
			.mui-input-group .mui-input-row:after{background-color: transparent;}
			.mui-input-row label{padding-left:0px;width: auto !important;}
			input.shuru{width: 78% !important;}
			.mui-bar-tab .footLink.mui-tab-item.mui-active {background-color: #35d0c9;color: #fff;}
			/*优惠卷信息*/
            .coupon {padding: 12px;background-color: #fff;margin-top: 10px;padding-top: 0px;padding-bottom: 0px;}
            .coupon .discount {padding-top: 12px;padding-bottom: 12px;border-bottom: dashed 1px #ccc;position: relative;height: 50px;}
			.coupon .discount span{position: absolute;top: 15px;}
			.coupon .discount .choice {position: absolute;right: 12px;top: 9px;}
			.coupon .discount .mui-switch-blue.mui-active {border: 2px solid #35d0c9;background-color: #35d0c9;}
			a.disLink{display: inline-block;width: 100%;position: relative;height: 44px;}
			a.disLink span.leftDis{position: absolute;top: 14px;color: #323232;}
			a.disLink span.rightDis{position: absolute;right: 30px;top: 14px;color: #323232;}
			.mui-icon-arrowright:before {content: '\e583';color: #35d0c9;}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">订单详情</h1>
		</header>
		<div class="mui-content mui-scroll" style="margin-bottom: 50px;">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-media" style="position: relative;">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left" :src="cover"  style="width: 40%;max-width: initial;height: auto;">
			            <div class="mui-media-body mui-ellipsis">
			                {{title}}
			                <p class="mui-ellipsis price" id="jiage">123</p>
			                <p class="mui-ellipsis date" id="yourDate">321</p>
			            </div>
			        </a>
			    </li>
			</ul>
			
		    <!--联系人信息   s-->
		    <div class="person" style="background-color: #fff;">
		    	<dl>
		    		<dt>联系人<a href="javascript:void(0);" class="mui-pull-right">选择联系人</a></dt>
		    		<!--<dd>姓<i class="jiange">音</i>名:<input class="mui-input-clear" />
		    		   
		    		</dd>
		    		<dd>手<i class="jiange">音</i>机:<input class="mui-input-clear"></dd>
		    		<dd>微信号:<input class="mui-input-clear"></dd>-->
		    		<form class="mui-input-group">
    					<div class="mui-input-row">
        					<label>联系人</label>
       					   <input type="text" class="mui-input-clear shuru" placeholder="请输入用户名">
    					</div>
    					<div class="mui-input-row">
        					<label>手机号</label>
       					   <input type="text" class="mui-input-clear shuru" placeholder="请输入用户手机号码">
    					</div>
    					<div class="mui-input-row">
        					<label>微信号</label>
       					   <input type="text" class="mui-input-clear shuru" placeholder="请输入用户手机号码">
    					</div>
					</form>
		    	</dl>
		    </div>
		    <!--联系人信息   e-->
		    <!--出行人信息   s-->
		     <div class="person" style="background-color: #fff;margin-top: 10px;">
		    	<dl>
		    		<dt>出行人<a href="javascript:void(0);" class="mui-pull-right">选择出行人</a></dt>
		    		<form class="mui-input-group">
    					<div class="mui-input-row">
        					<label>成人1</label>
       					   <input type="text" class="mui-input-clear shuru" placeholder="请填写出行人信息">
    					</div>
    					<div class="mui-input-row">
        					<label>成人2</label>
       					   <input type="text" class="mui-input-clear shuru" placeholder="请填写出行人信息">
    					</div>
					</form>
		    	</dl>
		    </div>
		    <!--优惠卷信息    s-->
		    <div class="coupon">
		      <div class="discount">	
		    	<span>使用优惠券</span>
		    	<div class="mui-switch mui-switch-mini mui-active mui-switch-blue choice" id="mySwitch">
		    	  <div class="mui-switch-handle"></div>
		    	</div>
		      </div>
		    	<a href="javascript:void(0)" style="display: inline-block;width: 100%;" class="disLink" id="disLink">
		    		<span class="leftDis">待金劵</span>
		    		<span class="rightDis">减￥17</span>
		    		<span class="mui-icon  mui-icon-arrowright mui-pull-right" style="position: absolute;right: 0px;top: 12px;"></span>
		    	</a>
		    </div>
		    <!--优惠券信息     e-->
		    <script type="text/javascript">
		    		document.getElementById("mySwitch").addEventListener("toggle",function(event){
					  if(event.detail.isActive){
//					    alert("你启动了开关");
					    $("#disLink").css("display","block");
					  }else{
//					    alert("你关闭了开关");
					    $("#disLink").css("display","none");
					  }
					})
		    	
		    </script>
		
		</div>
		 <!--出行人信息    e-->
		    <div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
				<div class="mui-card">
					<div class="mui-card-content">
						<dl style="margin-top: 0px;">
							<dt style="padding: 10px;text-align: center;border-bottom: dashed 1px #ccc;">费用明细</dt>
							<dd>1.住宿</dd>
							<dd>2.门票</dd>
							<dd>3.三餐</dd>
						</dl>
					</div>
				</div>
			</div>
		<!--footer start-->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active footLink" data-id="home" href="#forward">
				<span class="mui-tab-label" id="totalPrice">总价</span>
			</a>
			<a class="mui-tab-item footLink" data-id="tripline" href="javascript:void(0);" id="order"> 
				<span class="mui-tab-label" id="order">立即预定</span>
			</a>
		</div>
			<!--footer end-->

		
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function(){
				var text1=plus.storage.getItem("price");//暂存在本地的价格信息
				var text2=plus.storage.getItem("yourDate");
				document.getElementById("jiage").innerHTML=text1;
				document.getElementById("yourDate").innerHTML=text2;
				document.getElementById("totalPrice").innerHTML="总价"+"&nbsp"+text1;
			})

			function getDefaultData() {
				return {
					cover: '',
					title: '',
					author: '',
					time: '',
					content: ''
				}
			}

			var vm = new Vue({
				el: '.mui-content',
				data: getDefaultData(),
				methods: {
					resetData: function() {//重置数据
//						Object.assign(this.$data, getDefaultData());
					}
				}
			});

			//监听自定义事件，获取新闻详情
			document.addEventListener('get_order', function(event) {
				var guid = event.detail.guid;
				if(!guid) {
					return;
				}
				//前页传入的数据，直接渲染，无需等待ajax请求详情后
				vm.cover = event.detail.cover;
				vm.title = event.detail.title;
//				vm.author = event.detail.author;
//				vm.time = event.detail.time;
				//向服务端请求文章详情内容
				mui.ajax('http://spider.dcloud.net.cn/api/news/36kr/' + guid, {
					type:'GET',
					dataType: 'json', //服务器返回json格式数据
					timeout: 15000, //15秒超时
					success: function(rsp) {
						vm.content = rsp.content;
					},
					error: function(xhr, type, errorThrown) {
//						mui.toast('获取文章内容失败');
						//TODO 此处可以向服务端告警
					}
				});
			});

			//重写返回逻辑
			mui.back = function() {
				plus.webview.currentWebview().hide("auto", 300);
				//动画结束后，恢复默认值
				setTimeout(function() {
					window.scrollTo(0, 0);
					vm.resetData();
				}, 300);
			}
			
			document.getElementById("order").addEventListener("tap",function(){
				mui.openWindow({
					url:'payment/test2.html',
					id:'payment'
				})
			})
		</script>
	</body>

</html>